<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>超算控制台文档中心</title>
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
  <link rel="stylesheet" href="css/md.css">
  <!-- <link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.10.0/styles/zenburn.min.css"> -->
  <link rel="stylesheet" href="css/light.css">
  <script src="js/vue.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    [v-cloak] {
      display: none;
    }
    
    body {
      font-size: 14px;
      font-family: -apple-system, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Arial, sans-serif;
      color: #37393a;
      background: #eee;
    }

    a {
      text-decoration: none;
      color: #37393a;
    }

    *,
    *::before,
    *::after {
      outline: none;
      box-sizing: border-box;
    }

    .wrapper {
      width: 1320px;
      padding: 30px 0;
      margin-left: auto;
      margin-right: auto;
      position: relative;
    }
    #docTitle {
      width: 840px;
      height: 80px;
      font-size: 30px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      background: #fff;
      margin: 0 auto;
      line-height: 80px;
      position: relative;
      padding: 0 250px 0 30px;
      box-shadow: 0 -1px 5px #ccc;
    }
    #docTitle::before {
      content: attr(data-time);
      font-size: 12px;
      color: #999;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 30px;
      margin: auto;
      z-index: 1;
    }
    
    #content {
      width: 840px;
      padding: 10px 30px 30px 30px;
      min-height: 600px;
      background: #fff;
      box-shadow: 0 0 5px #ccc;
      margin: 0 auto;
    }

    #content h2 {
      height: 50px;
      line-height: 30px;
      border-bottom: none;
      font-weight: normal;
      font-size: 30px;
      color: #333;
      margin-top: 0;
    }

    #content img {
      max-width: 100%;
    }

    .l_w,
    .r_w {
      width: 220px;
      min-height: 200px;
      box-shadow: 0 0 5px #ccc;
      background: #fff;
      position: fixed;
      top: 30px;
      z-index: 2;
      user-select: none;
    }

    .l_w {
      left: 50%;
      margin-left: -660px;
      padding-bottom: 15px;
    }

    .r_w {
      right: 50%;
      margin-right: -660px;
    }

    .h2t {
      height: 80px;
      line-height: 80px;
      text-align: center;
      font-weight: normal;
      font-size: 24px;
      color: #333;
      border-bottom: 1px solid #ebebeb;
      margin-bottom: 0;
      margin-top: 0;
    }

    .dl {
      margin: 0;
      padding: 0;
    }

    .dl dt,
    .dl dd {
      display: block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .dl dt {
      font-style: normal;
    }

    .dl .dt1 {
      font-style: normal;
      cursor: pointer;
      padding-left: 10px;
      padding-right: 10px;
      padding: 17px 20px 17px 50px;
      margin-top: 0;
      font-size: 16px;
      color: #333;
      font-weight: normal;
      position: relative;
    }

    .dl>.dd {
      height: 55px;
      line-height: 55px;
      padding-left: 68px;
      margin-bottom: 0;
      cursor: pointer;
      font-size: 16px;
      color: #999;
      font-weight: normal;
      position: relative;
      display: none;
    }

    .dt1:hover,
    .dl>.dd:hover {
      background: #fafafa;
    }


    .dl .dt1::before,
    .dl>.dd::before {
      content: '';
      width: 12px;
      height: 16px;
      background: transparent url(images/text1.png) no-repeat;
      position: absolute;
      top: 20px;
      left: 25px;
    }

    .dl>.dd::before {
      left: 45px;
    }

    .dl.on .dt1,
    .dl.on>.dd {
      display: block;
    }
    .dl.on .dt1 {
      background: #eee;
      color: #999;
    }
    .dl.on .dt1::before,
    .dl.on>.dd::before {
      background: transparent url(images/text1.png) no-repeat;
    }
    
    .dl .dt1.cActive,
    .dl .dd.cActive {
      color: #0e9cf2;
    }
    .dl .dt1.cActive::before,
    .dl .dd.cActive::before {
      background: transparent url(images/text2.png) no-repeat;
    }
    
    .dl .imz {
      margin-left: 12px;
    }

    .u4 {
      padding: 15px 0;
      list-style: none;
    }

    .u4 li a {
      display: block;
      font-size: 12px;
      color: #555;
      height: 30px;
      line-height: 30px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding: 0 10px 0 15px;
    }

    .u4 li a:hover {
      color: #0e9cf2;
      text-decoration: none;
    }

    .backtop {
      width: 44px;
      height: 44px;
      background: #fff url(images/backtop1.png) no-repeat center;
      cursor: pointer;
      border-radius: 2px;
      box-shadow: 0 0 10px #d5d5d5;
      position: fixed;
      right: 50px;
      bottom: 100px;
      z-index: 50;
    }
    .backtop:hover {
      background: #fff url(images/backtop2.png) no-repeat center;
    }
  </style>
</head>

<body>
  <div class="wrapper" id="app" v-cloak>
    <div id="docTitle" :data-time="getUpdateTimeText">{{doc_title}}</div>
    <div id="content" v-html="content"></div>
    <div class="l_w">
      <h2 class="h2t">文档中心</h2>
      <dl class="dl" :class="{on: item.expand}" v-for="(item, index) of list" :key="index">
        <dt class="dt1" @click="checkDoc(item)" v-if="item.hashCode || item.list && item.list.length" :data-hash="item.hashCode" :class="{cActive: active_id == item.zid}">{{item.name}}<img
            class="imz" v-if="item.list && item.list.length" :src="item.expand ? 'images/zkb.png' : 'images/zk1.png'">
        </dt>
        <dd class="dd" v-for="(child, idx) of item.list" :key="idx" @click="checkDoc(child)" :data-hash="item.hashCode" :class="{cActive: active_id == child.zid}">{{child.name}}</dd>
      </dl>
    </div>
    <div class="r_w">
      <h2 class="h2t">本页文档</h2>
      <ul class="u4">
        <li v-for="(item, index) of anchor"><a href="javascript:;" @click="gotoAhr(item.ahr)">{{item.name}}</a></li>
      </ul>
    </div>
    <div class="backtop" @click="goTop"></div>
  </div>

  <script src="js/jquery.min.js"></script>
  <script src="js/marked.min.js"></script>
  <script src="js/highlight.min.js"></script> 
  <script>
    'use strict'
    var vm = new Vue({
      el: '#app',
      data: {
        list: [],
        anchor: [],
        content: '',
        doc_title: '',
        doc_update_time: 0,
        active_id: 0,
      },
      methods: {
        checkDoc(item) {
          if (item.list && item.list.length) {
            item.expand = !item.expand;
            return;
          }
          this.active_id = item.zid
          
          this.doc_title = item.name
          this.doc_update_time = item.updateTime
          item.hashCode && this.requestDoc(item.hashCode);
        },
        requestTitle() {
          var url = '/doc/getDirectoryStructure/'
          var that = this
          $.ajax({
            url: url,
            type: 'get',
            dataType: 'html',
            success: (res) => {
              that.list = JSON.parse(res).data.map(v => {
                v.expand = false;
                if (v.list && v.list.length) {
                  v.list.forEach(cur => {
                    cur.zid = this.getRandNum()
                  })
                } else {
                  v.zid = this.getRandNum()
                }
                return v;
              })
            }
          })
        },
        requestDoc(code) {
          var url = 'http://113.204.194.88:8089/ipfs/';
          var that = this;
          that.goTop()
          $.ajax({
            url: url + (code || ''),
            type: 'get',
            dataType: 'html',
            success(res) {
              that.content = marked(res)
              setTimeout(() => {
                that.getAnchor();
                $('body').find('pre code').each(function(i, block) {
                  hljs.highlightBlock(block);
                });
              }, 100)
              
            }
          })
        },
        getAnchor() {
          var _this = this
          _this.anchor = [];
          $('body').find('#content h3').each(function () {
            var that = $(this)
            var id = that.attr('id');
            var text = that.text();
            _this.anchor.push({
              name: text,
              ahr: id
            })
          })
        },
        goTop() {
          $('html,body').animate({scrollTop: 0}, 300);
        },
        gotoAhr(name) {
          $('html, body').animate({scrollTop: $('#' + name).offset().top - 20}, 300)
        },
        
        requestDocWhenInit() {
          setTimeout(() => {
            if (this.list && this.list.length && !this.list[0].hashCode) {
              var code = this.list[0].list[0].hashCode
              this.doc_title = this.list[0].list[0].name
              this.doc_update_time = this.list[0].list[0].doc_update_time
              
              this.requestDoc(code)
            } else if (this.list[0].hashCode) {
              this.doc_title = this.list[0].name
              this.doc_update_time = this.list[0].updateTime
              
              this.requestDoc(this.list[0].hashCode)
            } else {
              this.requestDocWhenInit()
            }
          }, 200)
        },
        
        getFormatTime(timestamp) {
          timestamp = timestamp-0 || 0
          var t = new Date(timestamp),
              Y = t.getYear(),
              M = t.getMonth() + 1,
              D = t.getDate(),
              h = t.getHours(),
              m = t.getMinutes(),
              s = t.getSeconds();
            if (Y < 1900) Y = Y + 1900;
            M = M < 10 ? '0' + M : M;
            D = D < 10 ? '0' + D : D;
            h = h < 10 ? '0' + h : h;
            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;
            return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s;
        },
        getRandNum() {
          return Math.floor((Math.random() * (1e8 - 1e3 + 1)) + 1e3);
        }
      },
      computed: {
        getUpdateTimeText() {
          return '更新时间 : ' + this.getFormatTime(this.doc_update_time)
        }
      },
      mounted() {
        this.requestTitle()
        this.requestDocWhenInit()
      },
    })
  </script>
</body>

</html>